<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.center {
				width: 1000px;
				margin: 0 auto;
			}

			body {
				background-color: #fff;
			}

			.nav .area {
				display: flex;
				align-items: center;
			}

			.nav .area ul {
				width: 850px;
				display: flex;
				justify-content: space-between;
			}

			.nav .area ul li {
				width: 70px;
				padding: 10px;
				margin: 10px;
				text-align: center;
			}

			.nav .area ul li>div {
				width: 33px;
				height: 45px;
				margin: 0 auto;

			}

			.nav .area ul li a {
				user-select: none;
				color: #000;
			}

			.nav .area ul li:nth-child(1)>div {
				background: url(img/icon.png);
				background-repeat: no-repeat;
			}

			.nav .area ul li:nth-child(2)>div {
				background: url(img/icon.png) no-repeat -200px 0;
			}

			.nav .area ul li:nth-child(3)>div {
				background: url(img/icon.png) no-repeat -200px 0;
			}

			.nav .area ul li:nth-child(4)>div {
				background: url(img/icon.png) no-repeat -300px 0;
			}

			.nav .area ul li:nth-child(5)>div {
				background: url(img/icon.png) no-repeat -400px 0;
			}

			.nav .area ul li:nth-child(6)>div {
				background: url(img/icon.png) no-repeat -500px 0;
			}

			.nav .area ul li:nth-child(7)>div {
				background: url(img/icon.png) no-repeat -565px 0;
			}

			.nav .area ul li:nth-child(8)>div {
				background: url(img/icon.png) no-repeat -565px 0;
			}

			.nav .area>ul>li.active {
				background-color: #008AFF;
			}

			.nav .area>ul>li.active>a {
				color: #fff;
			}

			.nav .area ul li.active:nth-child(1)>div {
				background: url(img/icon.png) no-repeat 0 -97px;
			}

			.nav .area ul li.active:nth-child(2)>div {
				background: url(img/icon.png) no-repeat -200px -97px;
			}

			.nav .area ul li.active:nth-child(3)>div {
				background: url(img/icon.png) no-repeat -200px -97px;
			}

			.nav .area ul li.active:nth-child(4)>div {
				background: url(img/icon.png) no-repeat -300px -97px;
			}

			.nav .area ul li.active:nth-child(5)>div {
				background: url(img/icon.png) no-repeat -400px -97px;
			}

			.nav .area ul li.active:nth-child(6)>div {
				background: url(img/icon.png) no-repeat -500px -97px;
			}

			.nav .area ul li.active:nth-child(7)>div {
				background: url(img/icon.png) no-repeat -565px -97px;
			}

			.nav .area ul li.active:nth-child(8)>div {
				background: url(img/icon.png) no-repeat -565px -97px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="center">
				<div class="area">
					<div>
						<img src="img/logo.png">
					</div>
					<ul>
						<li class="active">
							<div></div>
							<a href="index.html" target="_blank">首页</a>
						</li>
						<li>
							<div></div>
							<a href="scenery_list.html" target="_blank">热门景点</a>
						</li>
						<li>
							<div></div>
							<a href="zs_play.html" target="_blank">玩转舟山</a>
						</li>
						<li>
							<div></div>
							<a href="food.html" target="_blank">舟山海味</a>
						</li>
						<li>
							<div></div>
							<a href="hotel.html" target="_blank">酒店民宿</a>
						</li>
						<li>
							<div></div>
							<a href="ticket.html" target="_blank">旅游预定</a>
						</li>
						<li>
							<div></div>
							<a href="service.html" target="_blank">游客服务</a>
						</li>
						<li>
							<div></div>
							<a href="login.html" target="_blank">用户中心</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script>
			const qsa = x => document.querySelectorAll(x)
			const qs = x => document.querySelector((x))
			qsa('.nav .area>ul>li').forEach(li => {
				li.onmouseover = function() {
					qs('.nav .area>ul>li.active').classList.remove('active')
					this.classList.add('active')
				}
			})
		</script>
	</body>
</html>
